<template>
  <div>
    <h2>刀客页面</h2>
    <h4>我去过的城市（服务端渲染）：</h4>
    <ul>
      <li v-for="city in list">{{city}}</li>
    </ul>
    <h4>我去过的城市（vuex）：</h4>
    <ul>
      <!-- 如果没有store下的index.js中导出store，也可通过如下.modules.city的方式访问到store的state。
           <li v-for="city in $store.state.modules.city.list">{{city}}</li>-->
      <li v-for="city in $store.state.city.list">{{city}}</li>
    </ul>
    <input v-model="myCity"/>
    <button @click="add(myCity)">添加到store</button>
    <h4>导航</h4>
    <ul>
      <li v-for="nav in $store.state.navbar.navs">{{nav}}</li>
    </ul>
    <button @click="$store.dispatch('navbar/add')">导航后面加数字</button>
    <h4>$store.state:</h4>
    <pre>{{$store.state}}</pre>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapActions} from 'vuex'

  export default {
    layout: 'daoke',
    name: 'daoke',
    data: function () {
      return {
        myCity: '',
        list: [],
      }
    },
    methods: mapActions('city', ['add']),
    // 传统异步请求写法
    /*   async mounted() {
         let {data: {list}} = await axios.get('http://localhost:3000/city/list')
         this.list = list
       }
   */
    async asyncData() {
      let {data: {list}} = await axios.get('http://localhost:3000/city/list')
      return {
        list
      }
    }

  }
</script>

<style scoped>

</style>
